<!DOCTYPE HTML>
<html>
	<head>
		<title>运动框架运用</title>
		<meta charset="utf-8">
		<script type="text/javascript" src="./move.js"></script>
		<style>
		*{margin:0;
			padding:0;
				text-align: none;
				list-style: none;
		}
			#count{
				width:480px;
				height:450px;
				margin:0 auto;
				
			}
			#cTop{
				width:480px;
				height:300px;
				background:pink;
				position: relative;
			}
			#cBottom{
				width:480px;
				height:100px;
				background:#ccc;
			}
			.cTLeft{
				width:240px;
				height:300px;
				background:purple;
				float:left;
			}
			.cTRight{
				width:240px;
				height:300px;
				background:green;
				float:left;
			}
			.first
			{
				position: absolute;
				top:150px;
				left:60px;
				z-index: 3000;
				opacity: 0;
				filter: alpha(opacity:0);
			}
			.second
			{
				position: absolute;
				top:150px;
				right:60px;
				z-index:3000;
				opacity: 0;
				filter: alpha(opacity:0);
			}
			#ul1{
				position: relative;
			}
			#ul1 li{
				position: absolute;
				top:0;
				left: 0;
			}
			#ul2 li img{
				width:160px;
				float:left;
			}
		</style>
		<script>
		function getByClass(oParent,sClass)
		{
			var aResult=[];
			var aEle=oParent.getElementsByTagName('*');
			for(var i=0;i<aEle.length;i++)
			{
				if(aEle[i].className==sClass)
				{
					aResult.push(aEle[i]);
				}
				return aResult;
			}
		}
			window.onload=function(){
				var oCTop1=document.getElementById('cTop');
				var cTLeft1=getByClass(oCTop1,'cTLeft')[0];
				var cTRight1=getByClass(oCTop1,'cTRight')[0];
				var oFirst=getByClass(oCTop1,'first')[0];
				var oSecond=getByClass(oCTop1,'second')[0];
				cTLeft1.onmouseover=oFirst.onmouseover=function(){
					change(oFirst,'opacity',100);
				}

			}
		</script>
	</head>
	<body>
		<div id="count">
			<div id="cTop">
			
				<a href="javascript:;" class="cTLeft"></a>
				<a href="javascript:;" class="cTRight"></a>
				<ul id="ul1">
					<li style="z-index: 1"><img src="./film/fj1.jpg"/></li>
					<li><img src="./film/fj2.jpg"/></li>
					<li><img src="./film/fj3.jpg"/></li>
					<li><img src="./film/fj4.jpg"/></li>
					<li><img src="./film/fj5.jpg"/></li>
				</ul>
				<img src="./film/ljt.png" class="first"/>
			   <img src="./film/rjt.png" class="second"/>
			</div>
			<div id="cBottom">
				<ul id="ul2">
					<li><img src="./film/fj1.jpg"/></li>
					<li><img src="./film/fj2.jpg"/></li>
					<li><img src="./film/fj3.jpg"/></li>
					<li><img src="./film/fj4.jpg"/></li>
					<li><img src="./film/fj5.jpg"/></li>
				</ul>
			</div>
		</div>
	</body>
</html>